// 1.获取localStorage中的用户名数据, 根据用户名数据是否存在, 渲染界面
// 2.实现退出登录效果

//1.获取储存的数据
const login = document.querySelector('#login')
const register = document.querySelector('#register')

// // 判断用户名数据是否存在
if (!username && !password) {
  const username = localStorage.getItem('text')
  // 不存在
  login.innerHTML = `<a href="./login.html">请先登录</a>`
  register.innerHTML = `<a href="./register.html">免费注册</a>`

} else {
  // 存在
  login.innerHTML = `<a href="javascript:;"><i class="iconfont icon-xiaoren">${username}</i></a>`
  register.innerHTML = `<a href="javascript:;">退出登录</a>`
}

// 2.
register.addEventListener('click', function (e) {
  if (e.target.tagName === 'A') {
    // 退出登录，移除数据
    localStorage.removeItem('username')
    localStorage.removeItem('password')
    //a. 可以强制刷新就不跳转页面
    location.reload(true)
    // b.也可以直接退回
    // location.href = './login.html'
  }
})


document.body.addEventListener('click', function (e) {
  if (e.target.tagName === 'A') {
    e.preventDefault()
  }
})


document.querySelector('.location a:first-child').addEventListener('click', function () {
  location.href = './header.html'
})
// 整体遮罩部分
const shade = document.querySelector(".shade");
// 切换地址名
const cut = document.querySelector(".cut");
// 增加地址名
const increase = document.querySelector(".increase");
// 修改地址名
const alter = document.querySelector(".alter");
const ga = document.querySelector(".getAdd .ad");
// 地址展示位置
const gaSpan = document.querySelector(".getAdd span");
// 切换按钮内的ul
const cau = document.querySelector('.cut .ad')
// 点击弹出隐藏按钮的位置
const gpbtn = document.querySelector(".Addbutton");
cau.addEventListener('click', function () {
  cau.style.backgroundColor = "#78e9d188"
})
gpbtn.addEventListener("click", function (e) {
  // 切换地址，如果没有地址显示要求添加
  if (e.target.tagName === "A") {
    shade.style.display = "block";
    cut.style.display = "block";
    cut.addEventListener("click", function (e) {
      if (e.target.className === "b1") {
        shade.style.display = "none";
        cut.style.display = "none";
      } else if (e.target.className === "b2") {
        gaSpan.style.display = "none";
        ga.innerHTML = cau.innerHTML;
        shade.style.display = "none";
        cut.style.display = "none";
      }

    });
  } else if (e.target.className === "b2") {
    shade.style.display = "block";
    increase.style.display = "block";
  } else if (e.target.className === "b3") {
    shade.style.display = "block";
    alter.style.display = "block";
  }
});